<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码忍者 - 前端技术博客</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="lib/prism.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0/css/all.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <header class="header">
        <nav class="nav-container">
            <div class="logo">
                <i class="fas fa-code ninja-icon"></i>
                <h1>代码忍者</h1>
            </div>
            <div class="nav-links">
                <a class="active">首页</a>
                <div class="dropdown">
                    <a class="dropdown-trigger">HTML/CSS <i class="fas fa-chevron-down"></i></a>
                    <div class="dropdown-content">
                        <div class="submenu-item"> <span class="submenu-trigger">HTML5新特性 <i
                                    class="fas fa-chevron-right"></i></span>
                            <div class="submenu">
                                <!-- 原错误链接 --> <a>语义化标签完全指南</a>

                                <!-- 新增强功能 -->
                                <a class="nav-highlight">
                                    <i class="fas fa-star"></i> 最佳实践
                                </a>
                                <a>HTML5 API基础</a>
                                <a>Canvas绘图详解</a>
                            </div>
                        </div>
                        <div class="submenu-item"><span class="submenu-trigger">CSS3特性 <i
                                    class="fas fa-chevron-right"></i></span>
                            <div class="submenu">
                                <a>Flexbox布局</a>
                                <a>Grid布局</a>
                                <a>变换与动画</a>
                            </div>
                        </div>
                        <div class="submenu-item">
                            <span class="submenu-trigger">动画与交互 <i class="fas fa-chevron-right"></i></span>
                            <div class="submenu"> <a>CSS动画基础</a>
                                <a>高级动画技巧</a>
                                <a>3D变换效果</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dropdown">
                    <a class="dropdown-trigger">JavaScript <i class="fas fa-chevron-down"></i></a>
                    <div class="dropdown-content">
                        <div class="submenu-item">
                            <span class="submenu-trigger">核心概念 <i class="fas fa-chevron-right"></i></span>
                            <div class="submenu"> <a>作用域与闭包</a>
                                <a>原型与继承</a>
                                <a>this绑定机制</a>
                            </div>
                        </div>
                        <div class="submenu-item">
                            <span class="submenu-trigger">异步编程 <i class="fas fa-chevron-right"></i></span>
                            <div class="submenu"> <a>Promise详解</a>
                                <a>Async/Await使用</a>
                                <a>EventLoop机制</a>
                            </div>
                        </div>
                        <div class="submenu-item">
                            <span class="submenu-trigger">设计模式 <i class="fas fa-chevron-right"></i></span>
                            <div class="submenu"> <a>观察者模式</a>
                                <a>工厂模式</a>
                                <a>单例模式</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dropdown">
                    <a class="dropdown-trigger">Node.js <i class="fas fa-chevron-down"></i></a>
                    <div class="dropdown-content">
                        <div class="submenu-item">
                            <span class="submenu-trigger">基础概念 <i class="fas fa-chevron-right"></i></span>
                            <div class="submenu"> <a>模块系统</a>
                                <a>事件机制</a>
                                <a>Buffer和流</a>
                            </div>
                        </div>
                        <div class="submenu-item">
                            <span class="submenu-trigger">Web开发 <i class="fas fa-chevron-right"></i></span>
                            <div class="submenu"> <a>Express框架</a>
                                <a>中间件开发</a>
                                <a>身份认证</a>
                            </div>
                        </div>
                        <div class="submenu-item">
                            <span class="submenu-trigger">高级特性 <i class="fas fa-chevron-right"></i></span>
                            <div class="submenu"> <a>多进程</a>
                                <a>性能优化</a>
                                <a>调试技巧</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    </header>

    <main>
        <section id="home" class="hero">
            <div class="hero-content">
                <h1 class="glitch-text">代码忍者</h1>
                <p>探索前端技术的无限可能</p>
            </div>
            <div class="scroll-indicator">
                <span>向下滚动</span>
                <i class="fas fa-chevron-down"></i>
            </div>
        </section>
        <section id="featured" class="code-examples">
            <h2>代码示例</h2>
            <div class="examples-grid">
                <div class="example-card">
                    <div class="example-header">
                        <h3>Flex布局实现垂直居中</h3>
                        <span class="language-tag">CSS</span>
                    </div>
                    <div class="example-content">
                        <pre><code><span class="property">.container</span> {
    <span class="property">display</span>: <span class="keyword">flex</span>;
    <span class="property">justify-content</span>: <span class="keyword">center</span>;
    <span class="property">align-items</span>: <span class="keyword">center</span>;
    <span class="property">min-height</span>: <span class="number">100vh</span>;
}

<span class="property">.content</span> {
    <span class="comment">/* 内容样式 */</span>
    <span class="property">padding</span>: <span class="number">2rem</span>;
    <span class="property">background</span>: <span class="keyword">#fff</span>;
}</code></pre>
                    </div>
                    <div class="example-description">
                        <p>使用Flexbox实现内容的垂直和水平居中，适用于任何尺寸的容器和内容。</p>
                    </div>
                </div>

                <div class="example-card">
                    <div class="example-header">
                        <h3>Promise异步处理</h3>
                        <span class="language-tag">JavaScript</span>
                    </div>
                    <div class="example-content">
                        <pre><code><span class="keyword">async</span> <span class="keyword">function</span> <span class="function">fetchUserData</span>() {
    <span class="keyword">try</span> {
        <span class="keyword">const</span> response = <span class="keyword">await</span> <span class="function">fetch</span>(<span class="string">'/api/user'</span>);
        <span class="keyword">const</span> data = <span class="keyword">await</span> response.<span class="function">json</span>();
        <span class="keyword">return</span> data;
    } <span class="keyword">catch</span> (error) {
        console.<span class="function">error</span>(<span class="string">'Error:'</span>, error);
    }
}</code></pre>
                    </div>
                    <div class="example-description">
                        <p>使用async/await优雅地处理异步请求，使代码更易读和维护。</p>
                    </div>
                </div>

                <div class="example-card">
                    <div class="example-header">
                        <h3>动画效果</h3>
                        <span class="language-tag">CSS</span>
                    </div>
                    <div class="example-content">
                        <pre><code><span class="keyword">@keyframes</span> <span class="function">slideIn</span> {
    <span class="keyword">from</span> {
        <span class="property">transform</span>: <span class="function">translateY</span>(<span class="number">20px</span>);
        <span class="property">opacity</span>: <span class="number">0</span>;
    }
    <span class="keyword">to</span> {
        <span class="property">transform</span>: <span class="function">translateY</span>(<span class="number">0</span>);
        <span class="property">opacity</span>: <span class="number">1</span>;
    }
}

<span class="property">.animated</span> {
    <span class="property">animation</span>: slideIn <span class="number">0.5s</span> ease;</code></pre>
                    </div>
                    <div class="example-description">
                        <p>使用CSS关键帧动画创建平滑的滑入效果。</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="categories" class="topic-categories">
            <h2>技术专题</h2>
            <div class="category-grid">
                <div class="category-card html-css">
                    <i class="fab fa-css3"></i>
                    <h3>HTML/CSS</h3>
                    <ul>
                        <li><a>HTML5语义化</a></li>
                        <li><a>Flexbox布局</a></li>
                        <li><a>Grid布局</a></li>
                    </ul>
                </div>
                <div class="category-card javascript">
                    <i class="fab fa-js"></i>
                    <h3>JavaScript</h3>
                    <ul>
                        <li><a>原型与继承</a></li>
                        <li><a>异步编程</a></li>
                        <li><a>性能优化</a></li>
                    </ul>
                </div>
                <div class="category-card nodejs">
                    <i class="fab fa-node-js"></i>
                    <h3>Node.js</h3>
                    <ul>
                        <li><a>流和Buffer</a></li>
                        <li><a>Express中间件</a></li>
                        <li><a>模块系统</a></li>
                    </ul>
                </div>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="footer-content">
            <div class="footer-section">
                <h3>代码忍者</h3>
                <p>分享前端开发的技术与心得</p>
            </div>
            <div class="footer-section">
                <h3>导航</h3>
                <ul>
                    <li><a>首页</a></li>
                    <li><a>HTML/CSS</a></li>
                    <li><a>JavaScript</a></li>
                    <li><a>Node.js</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2025 代码忍者. All rights reserved.</p>
        </div>
    </footer>

    <script src="lib/prism.js"></script>
    <script src="js/main.js"></script>
</body>

</html>